<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <div v-if="showLoading">
        <div v-if="!showNotData">
          <view-list v-if="this.field == 'view'" :view-list="this.listData"></view-list>
          <food-list v-if="this.field == 'food'" :food-list="this.listData"></food-list>
          <hotel-list v-if="this.field == 'hotel'" :hotel-list="this.listData"></hotel-list>
          <massage-list v-if="this.field == 'massage'" :massage-list="this.listData"></massage-list>
          <ktv-list v-if="this.field == 'ktv'" :ktv-list="this.listData"></ktv-list>
        </div>
        <div v-else>
          <not-data :tips="tips"></not-data>
        </div>
      </div>
      <div v-else>
        <loading></loading>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import ViewList from './ViewList/Index.vue';
  import FoodList from './FoodList/Index.vue';
  import HotelList from './HotelList/Index.vue';
  import MassageList from './MassageList/Index.vue';
  import KtvList from './KtvList/Index.vue';
  import Error from './Sub/Error.vue';
  import Loading from './Sub/Loading.vue';

  import {
    ListModel
  } from 'models/list.js';

  import {
    mapState
  } from 'vuex';

  export default {
    name: 'List',
    data: function() {
      return {
        scroll: null,
        listData: [],
        showNotData: false,
        tips: '',
        listModel: null,
        showLoading: false
      }
    },
    components: {
      'view-list': ViewList,
      'food-list': FoodList,
      'hotel-list': HotelList,
      'massage-list': MassageList,
      'ktv-list': KtvList,
      'not-data': Error,
      'loading': Loading
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        mouseWheel: true,
        click: true,
        tap: true
      });
      this.getListData(this.cityId, this.field);
    },
    activated: function() {
      this.getListData(this.cityId, this.field);
    },
    methods: {
      getListData(cityId, field) {
        this.listModel = new ListModel();
        this.listModel.getListDatas(cityId, field)
          .then((res) => {
            this.$emit('titleChenge', this.field);
            if (res && res.status === 0) {
              this.showLoading = false;
              setTimeout(() => {
                this.showLoading = true;
                this.listData = res.data.data;
                this.showNotData = false;
              }, 500);
            } else {
              setTimeout(()=>{
                this.showLoading = true;
              },300);
              this.showNotData = true;
              this.tips = '网络走丢了';
            }
          }, (err) => {
            this.showLoading = true;
            this.showNotData = true;
            this.tips = err.err.message
          });
      }
    },
    computed: {
      ...mapState(['cityId', 'field'])
    },
    watch: {
      cityId() {
        this.getListData(this.cityId, this.field);
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
</style>
